import React,{useState} from 'react';
import { Table,Modal } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css, token }) => {
  const { antCls } = token;

  return {
    customTable: css`
      ${antCls}-table {
        ${antCls}-table-container {
          ${antCls}-table-body,
          ${antCls}-table-content {
            scrollbar-width: thin;
            scrollbar-color: #eaeaea transparent;
            scrollbar-gutter: stable;
          }
        }
      }
    `,
  };
});


  
const App = () => {
  const { styles } = useStyle();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const columns = [
  {
    title: 'Full Name',
    width: 100,
    dataIndex: 'name',
    fixed: 'left',
  },
  {
    title: 'Age',
    width: 100,
    dataIndex: 'age',
  },
  {
    title: 'Column 1',
    dataIndex: 'address',
    key: '1',
    fixed: 'left',
  },
  {
    title: 'Column 2',
    dataIndex: 'address',
    key: '2',
  },
  {
    title: 'Column 3',
    dataIndex: 'address',
    key: '3',
  },
  {
    title: 'Column 4',
    dataIndex: 'address',
    key: '4',
  },
  {
    title: 'Column 5',
    dataIndex: 'address',
    key: '5',
  },
  {
    title: 'Column 6',
    dataIndex: 'address',
    key: '6',
  },
  {
    title: 'Column 7',
    dataIndex: 'address',
    key: '7',
  },
  {
    title: 'Action 1',
    fixed: 'right',
    width: 90,
    render: () => <a>action</a>,
  },
  {
    title: 'Action 2',
    width: 90,
    render: () => <a>action</a>,
  },
  {
    title: 'Action 3',
    fixed: 'right',
    width: 90,
    render: (text, record,) => <a onClick={()=>openModel(record)}>action</a>,
  },
];
const dataSource = [
  {
    key: '1',
    name: 'Olivia',
    age: 32,
    address: 'New York Park',
  },
  {
    key: '2',
    name: 'Ethan',
    age: 40,
    address: 'London Park',
  },
];

 const [currtRow,setCurrRow] = useState();

const openModel = (row)=>{
    // console.log('row',row);
    setCurrRow(row)
    //delect({id:row.key}).then(res)=>{//getLiet()}.catch(err)=>{}
    showModal()
}
  return (
    <div>
        <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>{currtRow?.name}</p>
        <p>{currtRow?.age}</p>
        <p>Some contents...</p>
      </Modal>

    <Table
      bordered
      className={styles.customTable}
      columns={columns}
      dataSource={dataSource}
      scroll={{
        x: 'max-content',
      }}
      pagination={false}
    />
        </div>
  );
};
export default App;
// export default Comp1
